<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="顾客姓名" style="width: 250px;" class="filter-item" clearable @keyup.enter.native="searchList" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="searchList">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="昵称" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="80px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sex | typeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国家" align="center">
        <template slot-scope="{row}">
          <span>{{ row.country }}</span>
        </template>
      </el-table-column>
      <el-table-column label="省份" align="center">
        <template slot-scope="{row}">
          <span>{{ row.province }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="{row}">
          <span>{{ row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="企业资质">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.certificates&&scope.row.certificates!==''"
            style="width: 60px;"
            :src="scope.row.certificates"
            :preview-src-list="[scope.row.certificates]"
          >
            <div slot="placeholder" class="image-slot" style="width:60px;height:30px;text-align:center;line-height:30px;">
              <i class="dot el-icon-loading" style="font-size:20px;" />
            </div>
          </el-image>
          <span v-else>暂未上传</span>
        </template>
      </el-table-column>
      <el-table-column label="用户等级" align="center">
        <template slot-scope="{row}">
          <span>{{ row.grade }}级会员</span>
        </template>
      </el-table-column>
      <el-table-column label="节省金额" align="center">
        <template slot-scope="{row}">
          <span>¥{{ row.savingTotal.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款金额" align="center">
        <template slot-scope="{row}">
          <span>¥{{ row.payMoney.toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="success" size="mini" @click="edit(row)">
              地址
            </el-button>
            <el-button size="mini" type="success" @click="provide(row)">
              发放卷
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :limit.sync="listQuery.pagesize"
      :page.sync="listQuery.page"
      @pagination="getList"
    />

    <Dialog v-model="show" :gid="gid" />
    <dialog-provide ref="provide" :user-ids="userIds" />
  </div>
</template>

<script>
import { getUsers } from '@/api/customer'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

import Dialog from './components/dialog'
import dialogProvide from '@/views/discount/components/dialogProvide'
import { renderTime } from '@/utils/util'
// import { phoneReg, mailReg } from '@/utils/validate.js'
const sexOptions = [
  { index: 1, value: '男' },
  { index: 2, value: '女' },
  { index: 0, value: '--' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = sexOptions.reduce((acc, cur) => {
  acc[cur.index] = cur.value
  return acc
}, {})

export default {
  name: 'Orders',
  components: {
    Pagination,
    Dialog,
    dialogProvide
  },
  directives: { waves },
  filters: {
    typeFilter(index) {
      return calendarTypeKeyValue[index]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      listQuery: {
        keyword: '',
        page: 1,
        pagesize: 10
      },
      total: 0,
      listLoading: true,
      date: '',
      sexOptions,
      gid: '',
      show: false,
      userIds: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    renderTime,
    getList() {
      this.listLoading = true
      getUsers(this.listQuery).then(response => {
        this.list = response.result.list
        this.total = response.result.total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    edit(row) {
      this.gid = row.gid
      this.show = true
    },
    provide(row) {
      this.userIds = row.gid
      this.$refs.provide.dialogFormVisible = true
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
    @import '@/assets/scss/mixin.scss';
    .el-form-item--medium{
      .el-form-item__content{
        display: flex;
        align-items: center;
        .el-input{
          &+.el-button{
            margin-left: 0.625rem;
          }
        }
        .el-button{
          &:not(:first-child){
            margin-left: 0.625rem;
          }
        }
      }
    }
</style>
